.class-tab {
  padding: 0.2em;
  background: #fff;
  margin-top: 3.3em;
  font-size: 1.2em;
}
.class-tab .left{
  flex:1;
  padding: 0.5em;
  border-right: 1px solid #ddd;
  text-align: center;
}
.class-tab .left.active, .class-tab .right.active {
  /*color: #f39801;*/
  color: #0e90d2;
}
.class-tab .right{
  padding: 0.5em;
  flex:1;
  text-align: center;
}

.class-list {
  flex-wrap: wrap;
  /*padding: 1em 0 0 1em;*/

  background: #fff;
  margin-top: 1em;

}
.class-list .name{
  background: #ffffff;
  height: 2em;
  color: #666;
  line-height: 2em;
  font-size: 1.2em;
  padding: 0 0.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #ddd;
}
.class-item {
  border-bottom: 1px solid #eeeeee;
  line-height: 4em;
  height: 4em;
  color: #fff;
  padding-top: 1em;
  padding: 0.5em;
}
.class-item .left {
  flex: 1;
  color: #333;
}
.class-item .right {
   width: 17em;
  text-align: center;
 }
.op{
  height: 2em;
  line-height: 2em;
  padding: 0.8em 1.5em;
  border-radius: 2px;
}
.op.jh {
  background: #45c7c9;
}
.op.rz {
  background: #ffb846;
}
.op.zf {
  background: #f15755;
}
